<template>
  <div class="chat-wrapper-kimi" :class="{ 'chat-started': hasChatStarted }">
    <div class="top-logo-kimi" v-show="!hasChatStarted">YICHANG</div>
    <div class="main-content-kimi">
      <div class="content-section-kimi" >
        <Chat ref="chatRef" :callback="sendMsg" :bot-name="selectedItem.name" />
      </div>
    </div>
    <div class="example-questions-kimi" v-show="!hasChatStarted">
      <el-button round class="example-btn-kimi" @click="handleExampleClick('太空计算星座创新的发展趋势和应用前景如何？')"><el-icon><Ship /></el-icon> 太空计算星座创新</el-button>
      <el-button round class="example-btn-kimi" @click="handleExampleClick('CAD技术的未来发展趋势是什么？')"><el-icon><Opportunity /></el-icon> CAD技术的未来趋势</el-button>
      <el-button round class="example-btn-kimi" @click="handleExampleClick('为什么夏至是一年中白天最长的一天？')"><el-icon><Sunny /></el-icon> 夏至为何最长</el-button>
      <el-button round class="example-btn-kimi" @click="handleExampleClick('非物质文化遗产的数字化保护与创新有哪些方法？')"><el-icon><Management /></el-icon> 非遗的数字化保护与创新</el-button>
      <el-button round class="example-btn-kimi" @click="handleExampleClick('重庆火锅在中国文化中的地位和意义是什么？')"><el-icon><Bowl /></el-icon> 重庆火锅的文化身份</el-button>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive, onMounted, onUnmounted } from 'vue'
import Chat from '../components/chat.vue'
import { ElMessage, ElButton, ElIcon } from 'element-plus';
import { sendMessage as apiSendMsg } from "@/api/app-store/chat"; // Renamed to avoid conflict
import { Ship, Opportunity, Sunny, Management, Bowl } from '@element-plus/icons-vue';

const selectedItem = ref({name: 'KIMI'})
const hasChatStarted = ref(false)

onMounted(() => {
  calculateRows();
  window.addEventListener('resize', calculateRows);
});

onUnmounted(() => {
  window.removeEventListener('resize', calculateRows);
});

const textareaRows = ref(0);
const knowledgeRows = ref(0);

const calculateRows = () => {
  const lineHeight = 21;
  const windowHeight = window.innerHeight;
  const reservedSpace = 290; 
  const roleNameHeight = 70; 
  const roleDescHeight = 120; 
  const availableHeight = windowHeight - reservedSpace - roleNameHeight - roleDescHeight;
  textareaRows.value = Math.floor(availableHeight / lineHeight) - 1;
  knowledgeRows.value = Math.floor((windowHeight - reservedSpace) / lineHeight);
};

const form = reactive({
  roleName: '',
  roleDesc: '',
  roleGoal: '',
  knowledge: ''
})

const rules = {
  roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
  roleDesc: [{ required: true, message: '请输入角色描述', trigger: 'blur' }],
  roleGoal: [{ required: true, message: '请输入目标设置', trigger: 'blur' }]
}

const sendMsg = (currentMessageText, initUserMsgDisplay, botResponseDisplayCallback) => {
  if (!currentMessageText || currentMessageText.trim() === '') {
    ElMessage.error('请输入消息内容')
    return
  }

  // Mark chat as started
  hasChatStarted.value = true

  // Display user's message in Chat.vue
  if (typeof initUserMsgDisplay === 'function') {
    initUserMsgDisplay(currentMessageText);
  }
 
  
  apiSendMsg({
      content: currentMessageText,
      roleName: form.roleName || '',
      roleDesc: form.roleDesc || '',
      target: form.roleGoal || '',
      knowledge: form.knowledge || '',
    }, data => {
      // Display bot's response in Chat.vue
      if (typeof botResponseDisplayCallback === 'function') {
        botResponseDisplayCallback(data);
      }
    });
}

// 获取Chat组件的引用
const chatRef = ref(null)

const handleExampleClick = (question) => {
  // 标记聊天已开始
  hasChatStarted.value = true
  
  // 直接设置Chat组件的输入框内容并发送
  if (chatRef.value) {
    chatRef.value.currentMessage = question
    chatRef.value.sendMessage()
  }
}
</script>

<style scoped>
.chat-wrapper-kimi {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 8vh; 
  overflow: hidden; 
  transition: all 0.3s ease-in-out;
}

.chat-wrapper-kimi.chat-started {
  padding-top: 2vh;
  padding-bottom: 0;
}

.top-logo-kimi {
  font-size: 52px; 
  font-weight: 700;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-bottom: 4vh;
  letter-spacing: 3px;
  text-shadow: 0 2px 4px rgba(0,0,0,0.1);
  z-index: 10;
}

.main-content-kimi {
  width: 100%;
  height: 100%;
  max-width: 900px; 
  display: flex;
  flex-direction: column; 
  padding: 0;
  box-sizing: border-box; 
  overflow: hidden;
  position: relative;
}

.content-section-kimi {
  padding: 0;
  border: none;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
}


.example-questions-kimi {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap; 
  justify-content: center;
  gap: 8px; 
  max-width: 900px;
  margin-top: 15px;
  padding: 0 15px;
  box-sizing: border-box;
  z-index: 100;
}

/* PC端保持横向布局 */
@media (min-width: 800px) {
  .example-questions-kimi {
    flex-direction: row;
  }

  .example-btn-kimi {
    flex: 1;
    min-width: 0;
    justify-content: center;
    text-align: center;
  }
}

.example-btn-kimi {
  background: rgba(255, 255, 255, 0.95) !important;
  border: 1px solid rgba(102, 126, 234, 0.3) !important;
  color: #667eea !important;
  font-size: 14px;
  padding: 12px 20px !important;
  border-radius: 25px !important;
  transition: all 0.3s ease !important;
  backdrop-filter: blur(15px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  white-space: nowrap;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.example-btn-kimi .el-icon {
  margin-right: 8px;
  font-size: 16px;
  flex-shrink: 0;
}

.example-btn-kimi:hover {
  background: rgba(102, 126, 234, 0.15) !important;
  border-color: #667eea !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(102, 126, 234, 0.25) !important;
}

.example-btn-kimi:active {
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(102, 126, 234, 0.2) !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
  .chat-wrapper-kimi {
    padding-top: 60px;
  }
  
  .chat-wrapper-kimi.chat-started {
    padding-top: 20px;
  }
  
  .top-logo-kimi {
    font-size: 32px;
    margin-bottom: 20px;
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1001;
  }
  
  .main-content-kimi {
    height: calc(100vh - 80px);
    padding-top: 0;
  }
  
  .content-section-kimi {
    height: 100%;
  }
  
  /* 移动端样式 */
  @media (max-width: 799px) {
    .example-questions-kimi {
      position: fixed;
      bottom: 100px;
      left: 50%;
      transform: translateX(-50%);
      width: calc(100% - 20px);
      max-width: 420px;
      z-index: 999;
      padding: 8px;
      margin: 0;
      gap: 6px;
      flex-direction: column;
    }
    
    .example-btn-kimi {
      font-size: 13px !important;
      padding: 10px 14px !important;
      margin: 0 !important;
      min-height: 44px !important;
      border-radius: 16px !important;
      width: 100%;
      justify-content: flex-start;
      text-align: left;
    }
  }
   
   .example-btn-kimi .el-icon {
     font-size: 14px;
     margin-right: 6px;
   }
}

@media (max-width: 480px) {
  .top-logo-kimi {
    font-size: 32px;
  }
  .example-btn-kimi {
    font-size: 11px;
    padding: 6px 10px !important;
    margin-bottom: 8px; /* Add some space between rows of buttons */
  }
  .example-btn-kimi .el-icon {
    font-size: 13px;
  }
  .chat-wrapper-kimi {
    padding-top: 3vh;
  }
   .chat-wrapper-kimi.chat-started {
    padding-top: 1vh; 
  }
}
</style>